<template>
  <div id="addAddress">
    <van-nav-bar title="添加地址" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="tel"
        name="电话号码"
        label="电话号码"
        placeholder="电话号码"
        :rules="[{ required: true, message: '请填写电话号码' }]"
      />
      <van-field
        v-model="address"
        name="地址"
        label="地址"
        placeholder="地址"
        :rules="[{ required: true, message: '请填写地址' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >添加</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";

export default {
  name: "addAddress",
  data() {
    return { name: "", tel: "", address: "" };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      axios
        .post("/api/address/addAddress", {
          name: this.name,
          tel: this.tel,
          address: this.address,
        })
        .then((res) => {
          if (res.data.code == 200) {
            Toast.success("添加成功");
            this.$router.go(-1);
          } else {
            Toast.fail("添加失败");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
>>> .van-nav-bar {
  background: #42a5f3;
  color: #fff;
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
</style>